//仓租配置
<template>
  <div>
    <div style="margin:10px 0;">
      <a-button type="primary" @click="addRules">新增规则</a-button>
    </div>
    <a-spin tip="Loading..." :spinning="spinning">
      <a-table
        size="small"
        :data-source="ruleData"
        :pagination="false"
        bordered
      >
        <a-table-column
          key="weight"
          data-index="weight"
          align="center"
          width="15%"
        >
          <span slot="title">体积(立方米)</span>
          <template slot-scope="text, record">
            <span v-if="record.sysStoreHouseChargeRuleId && !record.isEdit">
              {{ record.weightLeft + "~" + record.weightRight }}
            </span>
            <div v-else>
              <a-input-number
                :style="
                  record.weightLeft === null || record.weightLeft === ''
                    ? styleNo
                    : styleYes
                "
                v-model="record.weightLeft"
                :min="0.0"
                :precision="6"
              />
              ~
              <a-input-number
                :style="
                  record.weightRight === null || record.weightRight === ''
                    ? styleNo
                    : styleYes
                "
                v-model="record.weightRight"
                :min="record.weightLeft * 1"
                :precision="6"
              />
            </div>
          </template>
        </a-table-column>
        <a-table-column key="age" data-index="age" align="center" width="15%">
          <span slot="title">货物库龄(天)</span>
          <template slot-scope="text, record">
            <span v-if="record.sysStoreHouseChargeRuleId && !record.isEdit">
              {{ record.ageLeft + "~" + record.ageRight }}
            </span>
            <div v-else>
              <a-input-number
                :style="
                  record.ageLeft === null || record.ageLeft === ''
                    ? styleNo
                    : styleYes
                "
                v-model="record.ageLeft"
                :min="0"
              />
              ~
              <a-input-number
                :style="
                  record.ageRight === null || record.ageRight === ''
                    ? styleNo
                    : styleYes
                "
                v-model="record.ageRight"
                :min="record.ageLeft * 1"
              />
            </div>
          </template>
        </a-table-column>
        <a-table-column
          key="price"
          data-index="price"
          align="center"
          width="9%"
        >
          <span slot="title">价格</span>
          <template slot-scope="text, record">
            <span v-if="record.sysStoreHouseChargeRuleId && !record.isEdit">
              {{ record.price }}
            </span>
            <a-input-number
              v-else
              :style="
                record.price == null ||
                record.price == '' ||
                record.price == undefined
                  ? styleNo
                  : styleYes
              "
              style="width:100%"
              v-model="record.price"
              :formatter="
                value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
              "
              :parser="value => `${value}`.replace(/\$\s?|(,*)/g, '')"
              :precision="6"
            />
          </template>
        </a-table-column>
        <a-table-column key="unit" data-index="unit" align="center" width="7%">
          <span slot="title">单位</span>
          <template slot-scope="text, record">
            <span v-if="record.sysStoreHouseChargeRuleId && !record.isEdit">
              {{ record.unit == 0 ? "按SKU计算" : "按立方米计算" }}
            </span>
            <div v-else>
              <a-select
                style="width:100%"
                show-search
                :style="
                  record.unit == null ||
                  record.unit == '' ||
                  record.unit == undefined
                    ? styleNo
                    : styleYes
                "
                option-filter-prop="children"
                v-model="record.unit"
                allowClear
                placeholder="单位"
              >
                <a-select-option
                  :value="item.value"
                  v-for="item in convers"
                  :key="item.value"
                >
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </div>
          </template>
        </a-table-column>
        <a-table-column
          key="isExemption"
          data-index="isExemption"
          align="center"
          width="8%"
        >
          <span slot="title">是否免租</span>
          <template slot-scope="text, record">
            <div>
              <a-switch
                :checked="record.isExemption == 1"
                :disabled="
                  record.sysStoreHouseChargeRuleId && !record.isEdit
                    ? true
                    : false
                "
                @change="e => changeExemption(e, record)"
              />
            </div>
          </template>
        </a-table-column>
        <a-table-column
          key="createTime"
          data-index="createTime"
          align="center"
          width="13%"
        >
          <span slot="title">创建时间</span>
          <template slot-scope="text, record">
            <div>
              {{ record.createTime }}
            </div>
          </template>
        </a-table-column>
        <a-table-column
          key="remarks"
          data-index="remarks"
          align="center"
          width="25%"
        >
          <span slot="title">备注</span>
          <template slot-scope="text, record">
            <span v-if="record.sysStoreHouseChargeRuleId && !record.isEdit">{{
              record.remarks
            }}</span>
            <div v-else>
              <a-input
                placeholder="备注（25字）"
                v-model="record.remarks"
                :maxLength="25"
              />
            </div>
          </template>
        </a-table-column>
        <!-- 操作 -->
        <a-table-column key="operation" data-index="operation" align="center">
          <span slot="title">操作</span>
          <template slot-scope="text, record">
            <a
              @click="saveRules(record)"
              href="javascript:;"
              v-if="!record.sysStoreHouseChargeRuleId || record.isEdit"
              style="color:#0000bf;border-bottom:1px solid #0000bf;"
              >保存</a
            >
            <a-divider
              type="vertical"
              v-if="!record.sysStoreHouseChargeRuleId || record.isEdit"
            />
            <a
              @click="delRules(record)"
              href="javascript:;"
              v-if="!record.sysStoreHouseChargeRuleId || record.isEdit"
              style="color:#0000bf;border-bottom:1px solid #0000bf;"
              >取消</a
            >
            <a
              href="javascript:;"
              v-if="
                record.sysStoreHouseChargeRuleId &&
                  !record.isEdit &&
                  record.count == null
              "
              @click="editRules(record)"
              style="color:#0000bf;border-bottom:1px solid #0000bf;"
              >编辑</a
            >
            <a-divider
              type="vertical"
              v-if="
                record.sysStoreHouseChargeRuleId &&
                  !record.isEdit &&
                  record.count == null
              "
            />
            <a-popconfirm
              title="是否要删除?"
              ok-text="是"
              cancel-text="取消"
              v-if="
                record.sysStoreHouseChargeRuleId &&
                  !record.isEdit &&
                  record.count == null
              "
              @confirm="e => onDelete(e, record)"
            >
              <a
                href="javascript:;"
                style="color:#f00;border-bottom:1px solid #f00;"
                >删除</a
              >
            </a-popconfirm>
            <span
              href="javascript:;"
              v-if="record.sysStoreHouseChargeRuleId && record.count != null"
              style="color:#0000bf;"
            >
              已应用
            </span>
          </template>
        </a-table-column>
      </a-table>
      <!-- 分页器 -->
      <div style="margin: 20px 0; text-align: center">
        <a-config-provider>
          <a-pagination
            show-size-changer
            :pageSizeOptions="['10', '20', '30']"
            :show-total="
              total => `${$t('m.page.Total')} ${total} ${$t('m.page.items')}`
            "
            @showSizeChange="showChange"
            :buildOptionText="
              props => ` ${props.value} ${$t('m.page.a')}/${$t('m.page.page')}`
            "
            show-quick-jumper
            :default-current="searchData.current"
            :total="total * 1"
            @change="onChangePage"
          />
        </a-config-provider>
      </div>
    </a-spin>
  </div>
</template>

<script>
import {
  config_searchTabList,
  ware_addWareRules,
  ware_editWareRules
} from "@/apis/system/setManage/setRules";
export default {
  data() {
    return {
      //单位数组
      convers: [
        { value: "0", label: "按SKU计算" },
        { value: "1", label: "按立方米计算" }
      ],
      styleNo: {
        border: "1px solid #f00",
        borderRadius: "5px"
      },
      styleYes: {
        border: "1px solid #ccc",
        borderRadius: "5px"
      },
      spinning: false,
      //列表数据
      ruleData: [],
      //查询数据
      searchData: {
        size: 10,
        current: 1
      },
      //条数
      total: 5
    };
  },
  mounted() {
    this.getTabList();
  },
  methods: {
    //查询表格数据
    async getTabList() {
      this.spinning = true;
      let res = await config_searchTabList(0, this.searchData);
      if (res.code == "200") {
        this.ruleData = res.responseBody.records;

        this.searchData.size = res.responseBody.size * 1;
        this.total = res.responseBody.total * 1;
        this.spinning = false;
      }
    },
    //新增规则按钮
    addRules() {
      let addObj = {
        weightLeft: null,
        weightRight: null,
        ageLeft: null,
        ageRight: null,
        price: null,
        unit: undefined,
        isExemption: 0,
        remarks: null,
        createTime: null,
        isAdd: 1,
        key: this.ruleData.length + 1
      };
      this.ruleData.unshift(addObj);
    },
    //是否豁免
    async changeExemption(e, record) {
      if (e) {
        if (record.sysStoreHouseChargeRuleId) {
          let res = await ware_editWareRules(record.sysStoreHouseChargeRuleId, {
            isExemption: 1
          });
          if (res.code == "10000") {
            record.isExemption = 1;
            this.getTabList();
          }
        } else {
          record.isExemption = 1;
        }
      } else {
        if (record.sysStoreHouseChargeRuleId) {
          let res = await ware_editWareRules(record.sysStoreHouseChargeRuleId, {
            isExemption: 0
          });
          if (res.code == "10000") {
            record.isExemption = 1;
            this.getTabList();
          }
        } else {
          record.isExemption = 0;
        }
      }
    },
    //保存规则
    async saveRules(record) {
      //如果是编辑就走编辑，不然就走新增
      if (record.isEdit) {
        let res = await ware_editWareRules(
          record.sysStoreHouseChargeRuleId,
          record
        );
        if (res.code == "10000") {
          record.isEdit = false;
        }
      } else {
        let res = await ware_addWareRules(record);
        if (res.code == "10000") {
          this.getTabList();
        }
      }
    },
    //取消新增规则
    delRules(record) {
      if (record.sysStoreHouseChargeRuleId) {
        record.isEdit = false;
      } else {
        this.ruleData.forEach((item, index) => {
          if (item.key == record.key) {
            this.ruleData.splice(index, 1);
          }
        });
      }
    },
    //编辑单条规则
    editRules(record) {
      console.log(record);
      record.isEdit = true;
    },
    //删除已保存的规则
    async onDelete(e, record) {
      let res = await ware_editWareRules(record.sysStoreHouseChargeRuleId, {
        isDelete: 1
      });
      if (res.code == "10000") {
        await this.getTabList();
        if (this.ruleData.length < 1) {
          this.searchData.current = this.searchData.current - 1;
          this.getTabList();
        }
      }
    },
    //分页器事件
    onChangePage(pageNumber) {
      this.searchData.current = pageNumber * 1;
      this.getTabList();
    },
    //页码变更
    showChange(current, size) {
      this.searchData.size = size * 1;
      this.searchData.current = current * 1;
      this.getTabList();
    }
  }
};
</script>

<style lang="less" scoped></style>
